<template>
	<view>
		<view class="banner">
			<image class="banner-img" :src="item.coverImage"></image>
			<view class="banner-title">{{item.title}}</view>
		</view>
		<view class="article-meta">
			<text class="article-text">发表于</text>
			<text class="article-time">{{item.createDate}}</text>
		</view>
		<view class="article-content">
			<u-parse :content="item.content"/>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default{
		components: {
			uParse
		},
		data() {
			return {
				item: {},
				id:""
			}
		},
		onShareAppMessage(res) {
			return this.getShareOjbect();
		},
		onLoad(op) {
			this.id = op.id;
			this.loadData();
		},
		methods:{
			loadData:function(){
				var that = this;
				that.$api.req({id:that.id},"/subject/get").then((res)=>{
					var d = res.data.data;
					that.item = d;
				})
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
	}
	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84upx;
		overflow: hidden;
		position: absolute;
		left: 30upx;
		bottom: 30upx;
		width: 90%;
		font-size: 32upx;
		font-weight: 400;
		line-height: 42upx;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20upx 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
		align-items: center;
	}

	.article-text {
		font-size: 26upx;
		line-height: 50upx;
		margin-right: 20upx;
	}

	.article-author,
	.article-time {
		font-size: 30upx;
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		margin-bottom: 30upx;
	}
</style>
